<template>
  <div>
    <BasicForm @register="registerForm" class="mr-3 w-2/3" />
  </div>
  <div>
    <BasicTable @register="registerTable" :maxHeight="400">
      <!-- 注释 -->
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <div class="flex justify-center">
            <TableAction :actions="tableActions(record)" />
          </div>
        </template>
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts" setup>
  import {
    BasicTable,
    useTable,
    TableAction,
    BasicColumn,
    CheckboxRender,
    SelectRender,
    InputRender,
    FormSchema,
  } from '@/components/Table';

  import { list } from '@/api/toolkit/column';
  import { ref } from 'vue';
  import { BasicForm, useForm } from '@/components/Form';
  // 自定义组件名称, 默认为文件名
  defineOptions({ name: 'FormSetting' });

  let props = defineProps(['id']);
  const tableId: number = props.id;

  // 表格列
  const tableColumns: BasicColumn[] = [
    {
      title: 'java字段名',
      dataIndex: 'fieldName',
      width: '10rem',
      align: 'left',
    },
    {
      title: 'java类型',
      dataIndex: 'fieldType',
      width: '10rem',
    },
    {
      title: '注释',
      dataIndex: 'columnComment',
      width: '10rem',
      align: 'left',
    },
    {
      title: '配置',
      width: '10rem',
      children: [
        {
          title: '新增',
          dataIndex: 'nullable',
          width: '8rem',
          customRender: ({ record, column, value }) => CheckboxRender(record, column, value, { checked: value }),
        },
        {
          title: '编辑',
          dataIndex: 'nullable',
          width: '8rem',
          customRender: ({ record, column, value }) => CheckboxRender(record, column, value, { checked: value }),
        },
        {
          title: '必填',
          dataIndex: 'required',
          width: '8rem',
          customRender: ({ record, column, value }) => CheckboxRender(record, column, value, { checked: value }),
        },
        {
          title: '标签',
          dataIndex: 'listLable',
          width: '10rem',
          customRender: ({ record, column, vlaue }) => InputRender(record, column, record.columnComment),
        },
        {
          title: '组件',
          dataIndex: 'listComponent',
          width: '10rem',
          customRender: ({ record, column }) =>
            SelectRender(record, column, {
              options: [
                { label: 'Input', value: 'Input' },
                { label: 'InputNumber', value: 'InputNumber' },
                { label: 'Select', value: 'Select' },
                { label: 'TextArea', value: 'TextArea' },
                { label: 'Date', value: 'Date' },
                { label: 'DateTime', value: 'DateTime' },
              ],
              defaultValue: ['Input'],
            }),
        },
      ],
    },
  ];

  async function queryTableColumns() {
    return await list({ tableId });
  }

  // 注册表格
  const [registerTable, { reload }] = useTable({
    api: queryTableColumns,
    columns: tableColumns,
    useSearchForm: false, // 搜索框配置: 是否打开搜索框、搜索框配置
    showTableSetting: false, // 是否显示设置按钮
    size: 'small',
    bordered: true, // 是否包含边框
    showIndexColumn: true, // 是否包含序号列
    rowKey: 'id',
    pagination: false,
    titleHelpMessage: '根据服务端领域对象 Ts 的对象',
    immediate: true,
  });

  // 表单数据
  const formModel = ref<any>({});

  // 表单字段
  const formSchema: FormSchema[] = [
    {
      field: 'editComponent',
      label: '编辑组件',
      component: 'Select',
      componentProps: {
        options: [
          { label: '抽屉', value: 'Drawer' },
          { label: '模态窗口', value: 'Modal' },
        ],
        placeholder: '全部',
      },
    },
    {
      field: 'windowType',
      label: '编辑类型',
      component: 'Select',
      defaultValue: ['insertEnable'],
      componentProps: {
        options: [
          { label: '新增', value: 'insertEnable' },
          { label: '更新', value: 'updateEnable' },
        ],
        mode: 'multiple',
      },
    },
  ];
  // 注册表单
  const [registerForm, { validate, resetFields }] = useForm({
    labelWidth: 90,
    baseColProps: { span: 24, lg: 8 },
    showActionButtonGroup: false,
    schemas: formSchema,
    model: formModel,
  });

  // defineExpose({
  //   validate
  // });
</script>
